import React from "react";
import { connect } from "react-redux";
import { Input, Divider, Button } from "antd";
import { Html5Outlined, BuildOutlined, BranchesOutlined } from "@ant-design/icons";
import TemplateItem from "./components/TemplateItem";
import DefaultHeader from "layout/defaultLayout/Header";
import { IState } from "store/reducers/home";
import "./index.scss";
const { Search } = Input;
const mapStateToProps = (state: any) => ({data: state.home})
interface IHomeProps {
  data: IState;
}
const Home: React.FC<IHomeProps> = (props) => {
  const { data } = props;
  return <div className="home-wrapper">
    <DefaultHeader className="home-header" />
    <div className="home-cover">
      <div className="blur-cover"></div>
      <div className="home-one-main">
        <h1>Voyage_LEGO: 让设计更简单</h1>
        <div className="search-wrapper">
          <Search placeholder="输入模版名称检索模版" allowClear enterButton onSearch={() => {}} style={{ width: 500 }} />
        </div>
      </div>
    </div>
    <div className="func-desc-wrapper">
      <ul className="func-list">
        <li className="func-item">
          <Html5Outlined className="func-icon" />
          <div className="func-desc">
            <h3>专注前端构建,快速开发</h3>
            <span>持续集成前端简易化开发流程</span>
          </div>
        </li>
        <li className="func-item">
          <BuildOutlined className="func-icon" />
          <div className="func-desc">
            <h3>不断组件功能扩展,持续堆叠</h3>
            <span>Lego平台不断提升丰富性</span>
          </div>
        </li>
        <li className="func-item">
          <BranchesOutlined className="func-icon" />
          <div className="func-desc">
            <h3>快速集成,并行开发</h3>
            <span>开放的SDK持续项目同步</span>
          </div>
        </li>
      </ul>
    </div>
    <div className="recommend-wrapper">
      <div className="recommend-header">
        <Divider className="divider-text">热门H5设计</Divider>
        <p>使用模版快速生成网页设计</p>
      </div>
      <div className="template-list">
        {
          data.templateList.map(temp => {
            return <TemplateItem key={temp.id} temp={temp} />
          })
        }
      </div>
      <div className="load-more">
        <Button type='primary'>加载更多</Button>
      </div>
    </div>
  </div>
}

export default connect(mapStateToProps, {})(Home);